<template>
  <div>
    <div class="num">
      <div class="content">
        <div class="title">截至{{ covData.modifyTime | time }}全国数据统计</div>
        <ul class="wrap">
          <li>
            <div class="number">
              <span>较昨日</span>{{ covData.currentConfirmedIncr | number }}
            </div>
            <div class="bold">{{ covData.currentConfirmedCount |division }}</div>
            <strong>现存确诊</strong>
          </li>
          <li>
            <div class="number">
              <span>较昨日</span>{{ covData.suspectedIncr | number }}
            </div>
            <div class="bold">{{ covData.suspectedCount |division }}</div>
            <strong>境外输入</strong>
          </li>
          <li>
            <div class="number">
              <span>较昨日</span>{{ covData.seriousIncr | number }}
            </div>
            <div class="bold">{{ covData.seriousCount |division }}</div>
            <strong>现存无症状</strong>
          </li>
          <li>
            <div class="number">
              <span>较昨日</span>{{ covData.confirmedIncr | number }}
            </div>
            <div class="bold">{{ covData.confirmedCount | division }}</div>
            <strong>累计确诊</strong>
          </li>
          <li>
            <div class="number">
              <span>较昨日</span> {{ covData.deadIncr | number }}
            </div>
            <div class="bold">{{ covData.deadCount | division }}</div>
            <strong>累计死亡</strong>
          </li>
          <li>
            <div class="number">
              <span>较昨日</span> {{ covData.curedIncr | number }}
            </div>
            <div class="bold">{{ covData.curedCount | division }}</div>
            <strong>累计治愈</strong>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Covnumber",
  props: ["covData"],

  filters: {
    //处理时间格式
    time(time) {
      time = new Date();
      let year=time.getFullYear();
      let month=time.getMonth()+ 1;
      let date=time.getDate()
      let hours=time.getHours();
      let minutes=time.getMinutes()
      let second=time.getSeconds();
      return `${year}-${month>10? month:'0'+month}-${date>10? date:'0'+date} ${hours>10? hours:'0'+hours}:${minutes>10? minutes:'0'+minutes}:${second>10? second:'0'+second}`;
    },
    //数字>0 补+
    number(value) {
      value = value > 0 ? "+" + value : value;
      if (value == undefined) {
        return "未公布";
      }
      return value;
    },
    //处理数据分隔
    division(num) {
      if (num == undefined) return '未公布';
      return num.toLocaleString()
    }
  }


}
</script>

<style scoped>
.num {
  background: #f5f5f5;
  padding-top: 0.3rem;

}

.num .content {
  background: #fff;
  padding: 0.3rem;
  min-height: 2rem;
  border-radius: 0.2rem 0.2rem 0 0;
}

.num .content .title {
  color: #666;
  margin-bottom: 0.2rem;
}

.wrap {
  display: flex;
  flex-wrap: wrap;
  padding-top: 0.2rem;
  border-radius: 0.1rem;
  box-shadow: 0 0 3px 2px rgba(194, 192, 192, 0.2);
}

.wrap li {
  width: 33.33333%;
  text-align: center;
  margin-bottom: 0.24rem;
  position: relative;
  font-size: 0.24rem;
}

.wrap li .number span {

  color: #777;
  font-weight: bold;
}

.wrap li strong {
  color: #333;
}

/*// 1 2  3-  4 5 6-*/
li::after {
  content: "";
  display: block;
  position: absolute;
  right: 1px;
  top: 0.2rem;
  height: 0.8rem;
  border-right: 1px solid #eee;
}

li:nth-child(3n)::after {
  content: "";
  border-right: 0;
}

.bold {
  font-weight: bold;
  font-size: 0.36rem;
}

li:nth-child(1) {
  color: red;
}

li:nth-child(2) {
  color: rgb(18, 143, 14);
}

li:nth-child(3) {
  color: orange;
}

li:nth-child(4) {
  color: rgb(189, 19, 98);
}

li:nth-child(5) {
  color: rgb(223, 208, 7);
}

li:nth-child(6) {
  color: rgb(8, 110, 194);
}

</style>
